<template>
    <view class="register-container">
        <!-- logo区域 -->
        <view class="logo-wrap" @click="goto('/pages/index/index')">
            <image class="logo" src="@/static/images/logo.png"/>
            <view class='txt'>自由交流，管他性谁</view>
        </view>

        <!-- 注册表单区域 -->
        <view class="register-wrap">
            <!-- 基础表单校验 -->
			<uni-forms ref="formRef" :rules="rules" :modelValue="formData">
				<!-- 用户名 -->
				<uni-forms-item name="username">
					<uni-easyinput
						prefixIcon="person"
						:placeholderStyle="placeholderStyle"
						v-model="formData.username"
						:maxlength="30"
						placeholder="请输入用户名"
						:primaryColor="global.THEME_COLOR"
					/>
				</uni-forms-item>

				<!-- 手机号 -->
				<uni-forms-item name="mobile">
					<uni-easyinput
						type="number"
						prefixIcon="phone"
						:placeholderStyle="placeholderStyle"
						v-model="formData.mobile"
						:maxlength="11"
						placeholder="请输入手机号"
						:primaryColor="global.THEME_COLOR"
					/>
				</uni-forms-item>

				<!-- 邮箱 -->
				<uni-forms-item name="email">
					<uni-easyinput
						prefixIcon="email"
						:placeholderStyle="placeholderStyle"
						v-model="formData.email"
						:maxlength="50"
						placeholder="请输入邮箱"
						:primaryColor="global.THEME_COLOR"
					/>
				</uni-forms-item>
				
				<!-- 密码 -->
				<uni-forms-item name="password">
					<uni-easyinput
						type="password"
						prefixIcon="locked"
						:placeholderStyle="placeholderStyle"
						v-model="formData.password"
						:maxlength="16"
						placeholder="请输入密码"
						:primaryColor="global.THEME_COLOR"
					/>
				</uni-forms-item>

                <!-- 确认密码 -->
				<uni-forms-item name="repassword">
					<uni-easyinput
						type="password"
						prefixIcon="locked"
						:placeholderStyle="placeholderStyle"
						v-model="formData.repassword"
						:maxlength="16"
						placeholder="请输入确认密码"
						:primaryColor="global.THEME_COLOR"
					/>
				</uni-forms-item>
			</uni-forms>
			<button class="register-btn" @click="handlerRegister">注&nbsp;&nbsp;册</button>
			
			<!-- 底部 -->
			<view class="footer-wapper">
				<view @click="goto('/pages/message_login/index')">短信登录</view>
				<view @click="goto('/pages/register/register')" style="font-size: 36upx;color: #E83915;">还没有账户</view>
				<view @click="goto('/pagesUser/forgot_password/index')">找回密码</view>
			</view>
			
        </view>
    </view>
</template>


<script setup lang="ts">
import { reactive, ref } from "vue"
import { useUserStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
import { inject } from "vue"


// ----------------- 定义全局变量开始 -----------------
// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 提示样式
const placeholderStyle = ref('font-size:14px')
// ----------------- 定义全局变量结束 -----------------

onLoad(() => {
	// 如果用户已登录,将不允许访问注册页面
	if (userStore.profile?.token) {
		const routes = getCurrentPages()
		// 上一个页面
		let prevPage:any = ''
		if (routes.length >= 2) {
			prevPage = routes[0].route
			// 获取当前页面
			const currentPage = routes[routes.length - 1].route
			if (currentPage == 'pages/register/index') {
				// 跳转上一个页面
				uni.navigateBack()
			}
		}
	}
})



// ----------------- 注册用户功能开始 -----------------
// 提交数据
const formData = reactive({
	username: '',
	mobile: '',
	email: '',
	password: '',
	repassword: ''
})

const formRef = ref()

// 验证规则
const rules = {
	username: {
		rules: [{
			required: true,
			errorMessage: '用户名不能为空'
		}]
	},
	mobile: {
		rules: [
        {
				required: true,
				errorMessage: '手机号不能为空!'
			},
			{
				validateFunction: function(rule:any, value:any, data:any, callback:any) {
					let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/
					if (!reg.test(value)) {
						callback('请输入正确格式的手机号!')
					}
					return true
				}
			}
        ]
	},
    email: {
		rules: [
			{
				required: true,
				errorMessage: '邮箱不能为空!'
			},
			{
				validateFunction: function(rule:any, value:any, data:any, callback:any) {
					let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
					if (!reg.test(value)) {
						callback('请输入正确格式的邮箱!')
					}
					return true
				}
			}
		]
	},
	password: {
		rules: [{
			required: true,
			errorMessage: '密码不能为空!'
		}]
	},
	repassword: {
		rules: [
			{
				required: true,
				errorMessage: '确认密码不能为空!'
			},
			{
				validateFunction: function(rule:any, value:any, data:any, callback:any) {
					if (value != formData.password) {
						callback('两次输入密码不一致!')
					}
					return true
				}
			}
		]
	}
}

// 处理注册
const handlerRegister = () => {
	formRef.value.validate().then(async () => {
		await userStore.register(formData)
        uni.showToast({
			title: '注册成功',
			duration: 1000
		})
		
		setTimeout(() => {
			// 跳转
			uni.redirectTo({
				url: '/pages/password_login/index'
			})
		}, 1000)
	}).catch((err:any) => {
        console.log('err =', err);
	})
}
// ----------------- 注册用户功能开始 -----------------



// ------------------- 跳转页面开始 -------------------
const goto = (url:any) => {
	if (url == '/') {
		uni.switchTab({ url: '/pages/index/index' })
		return false
	} 
    uni.navigateTo({url})
}
// ------------------- 跳转页面结束 -------------------
</script>

<style lang="scss">
.register-container {
    // logo区域
    .logo-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        height: 400rpx;
        text-align: center;
        background-color: #ffffff;
        .logo {
            width: 400rpx;
		    height: 150rpx;
        }
        .txt {
			margin-top: 20rpx;
            color: #c9cccb;
			font-size: 24rpx;
        }
    }

    // 注册表单区域
    .register-wrap {
		padding: 30rpx;
		background-color: #fff;
		.register-btn {
			background-color: $uni-color-primary;
			color: #fff;
			border-radius: 46rpx;
		}

		.footer-wapper {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
		}
	}
}
</style>